Description

When launching the app while the device is offline or unable to connect to the Node-RED server (due to server-side issues), users currently encounter a blank screen that cannot be navigated past without reloading (if available) or relaunching the app. This persists even if the Internet connection has been restored or the server is functioning correctly again.

This PR addresses such issues by continuing to load a minimal Vue app (fallback app) instead of aborting the app load, which currently results in blank screens. The fallback app can display relevant information and provide options to the user, such as manually reloading the page (a feature absent in PWA on iOS) or opening the email client to send a message to the server admin (for server-related issues). The fallback app is also available offline. Once loaded, if it detects browser is offline, it registers an event listener to detect when the browser comes back online, at which point it reloads and retries loading the full Dashboard 2 app.

Furthermore, this PR includes the ability to provide configurable theming from the Node-RED editor to the fallback app and the loading splash screen. This is achieved by caching the theme to local storage upon successful connections and subsequently loading it from the cache at launch. The cached theme is then used as a fallback theme on connection failures, as user-configured themes are only available upon successful connection.

Related Issue(s)

Checklist

• I have read the contribution guidelines
• Suitable unit/system level tests have been added and they pass
• Documentation has been updated
  • Upgrade instructions
  • Configuration details
  • Concepts
• Changes flowforge.yml?
  • Issue/PR raised on FlowFuse/helm to update ConfigMap Template
  • Issue/PR raised on FlowFuse/CloudProject to update values for Staging/Production

Labels

• Includes a DB migration? -> add the area:migration label